<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>jQuery Pagination - jPaginate</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="jPaginate - jQuery Pagination Plugin" />
        <meta name="keywords" content="jquery, plugin, pagination, fancy" />
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
        <style>
            body{
                background: #a7c7dc;
                font-family: verdana;
                padding:0px;
                margin:0px;
                letter-spacing:2px;
            }
          
            .content{
                margin-top:100px;
                padding:0px;
                bottom:0px;
            }
            
            .demo{
                width:50%;
				height:600px;
                padding:10px 20px 10px 20px;
                margin:10% auto;
                border: 1px solid #fff;
                background-color:#f7f7f7;
				text-align: center;
            }
       
			.pagedemo{
				border: 1px solid #CCC;
				width:95%;
				height: 300px;
				margin:2px;
                padding:50px 10px 50px;
				font-size: 30px;
             
				background-color:white;	
			}
        </style>
    </head>
    <body>
      
        <div class="content">
            
			<div id="paginationdemo" class="demo">
                <h1>pagination</h1>
                <div id="p1" class="pagedemo _current" style=""><img src= "1.jpg" width= 500 height = 300 ></div>
				<div id="p2" class="pagedemo" style="display:none;"><img src = "2.jpg" width = 500 height = 300></div>
				<div id="p3" class="pagedemo" style="display:none;"><img src = "3.jpg" width = 500 height = 300></div>
				<div id="p4" class="pagedemo" style="display:none;"><img src = "4.jpg" width = 500 height = 300></div>
				<div id="p5" class="pagedemo" style="display:none;"><img src = "5.jpg" width = 500 height = 300></div>
				<div id="p6" class="pagedemo" style="display:none;"><img src = "6.jpg" width = 500 height = 300></div>
				<div id="p7" class="pagedemo" style="display:none;"><img src = "7.gif" width = 500 height = 300></div>
				<div id="p8" class="pagedemo" style="display:none;"><img src = "8.jpg" width = 500 height = 300></div>
				<div id="p9" class="pagedemo" style="display:none;"><img src = "9.jpg" width = 500 height = 300></div>
				<div id="p10" class="pagedemo" style="display:none;"><img src = "10.jpg" width = 500 height = 300></div>
				<div id="demo5">                   
                </div>
            </div>
        </div>
            
       
		<script type="text/javascript" src="jquery-1.3.2.js"></script>
		<script src="jquery.paginate.js" type="text/javascript"></script>
		<script type="text/javascript">
		$(function() {
			
			$("#demo5").paginate({
				count 		: 10,
				start 		: 1,
				display     : 7,
				border					: true,
				border_color			: '#fff',
				text_color  			: '#fff',
				background_color    	: 'black',	
				border_hover_color		: '#ccc',
				text_hover_color  		: '#000',
				background_hover_color	: '#fff', 
				images					: false,
				mouse					: 'press',
				onChange     			: function(page){
											$('._current','#paginationdemo').removeClass('_current').hide();
											$('#p'+page).addClass('_current').show();
										  }
			});
		});
		</script>
	</body>
</html>

